<template>
  <div class="story-view">
    <div class="story-header">

      <button @click="goBack" class="refresh-btn back-btn">
        <span class="icon">&#8592;</span> 返回
      </button>

      <h2>🌟 今日英语故事</h2>
      <div class="button-container">
        <button @click="startInteractiveStory" class="refresh-btn">
          <span class="icon">&#x1F4D6;</span> 生成互动故事
        </button>
        <button @click="resetStory" class="reset-btn" v-if="storyStarted">
          <span class="icon">&#x21BB;</span> 重新开始
        </button>
      </div>
    </div>
    
    <!-- 故事内容区域 - 不再使用v-else -->
    <div v-if="displayLines.length">
      <!-- 场景图片区域 -->
      <div class="scene-image-container" v-if="sceneImage">
        <img :src="sceneImageUrl" class="scene-image" />
      </div>
      <div class="scene-image-placeholder" v-else-if="storyStarted">
        <div class="no-image-notice">故事情境想象中...</div>
      </div>
      <!-- 对话框区域 -->
      <div class="dialogue-box">
        <div class="character-name" v-if="currentSpeaker">{{ currentSpeaker }}</div>
        <div class="dialogue-text" v-html="highlightKeywords(displayLines.join('\n'))"></div>     
        <!-- 添加中文翻译区域 -->
          <pre v-if="showTranslation && chineseTranslation" class="translation-text" v-html="highlightKeywords(chineseTranslation)"></pre>
        
        <div v-if="storyStarted && currentPageIndex === storyPages.length - 1 && currentPage.choices && currentPage.choices.length > 0" class="choices-list">
          <button 
            v-for="(choice, idx) in currentPage.choices" 
            :key="idx"
            @click="selectChoice(idx + 1)"
            class="choice-btn"
            type="button"
          >
            {{ idx + 1 }}. {{ choice }}
          </button>
        </div>
        <div v-if="isStoryEnding" class="story-ending">
          <span class="ending-icon">🏁</span> 故事已结束
        </div>
        <!-- 在这里添加翻页导航控件 (在翻译按钮之前) -->
        <div class="page-navigation">
          <button 
            @click="prevPage" 
            class="page-nav-btn" 
            :disabled="currentPageIndex === 0"
          >
            <span class="icon">&#x2190;</span> 上一页
          </button>
          <div class="page-indicator">{{ currentPageIndex + 1 }}/{{ storyPages.length }}</div>
          <button 
            @click="nextPage" 
            class="page-nav-btn" 
            :disabled="currentPageIndex >= storyPages.length - 1"
          >
            下一页 <span class="icon">&#x2192;</span>
          </button>
        </div>
        
        <!-- 添加翻译切换按钮 -->
        <button @click="toggleTranslation" class="translation-btn" v-if="storyStarted">
          <span class="icon">🔤</span> {{ showTranslation ? '隐藏翻译' : '显示翻译' }}
        </button>
        <!-- 英文语音播放按钮 -->
        <button @click="playEnglishSpeech" class="speech-btn" v-if="storyStarted">
          <span class="icon">🔊</span> 播放英文语音
        </button>
      </div>
    </div>
    <div v-else-if="!loading" class="no-story">
      点击"生成互动故事"按钮开始你的英语学习冒险！
    </div>
    
    <!-- 加载状态覆盖层 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading">
        <span class="spinner"></span> 故事生成中...
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Story",
  data() {
    return {
      storyContent: "",
      loading: false,
      displayLines: [],
      timer: null,
      
      // 添加中文翻译相关数据
      chineseTranslation: "",
      showTranslation: false,
      
      // 互动故事相关数据
      storyStarted: false,
      isStoryEnding: false,
      choices: [],
      choicesText: "",
      sceneImage: null, // 存储当前场景图像
      isAnimating: false,
      storyPages: [], // 存储所有故事页面
      currentPageIndex: 0, // 当前页面索引
      keywords: [],
    };
  },
  computed: {
    // 场景图片URL
    sceneImageUrl() {
      return this.sceneImage ? `data:image/png;base64,${this.sceneImage}` : '';
    },
    // 解析当前说话人（如有）
    currentSpeaker() {
      const firstLine = this.displayLines[0] || '';
      const match = firstLine.match(/^(\w+):/);
      return match ? match[1] : '';
    },
    currentPage() {
      return this.storyPages[this.currentPageIndex] || {
        englishContent: "",
        chineseContent: "",
        sceneImage: null,
        choices: []
      };
    }
  },
  methods: {

      // 页面导航方法
      nextPage() {
        if (this.currentPageIndex < this.storyPages.length - 1) {
          this.currentPageIndex++;
          this.updateDisplayContent();
        }
      },

      goBack() {
        this.$router.back();
      },

      prevPage() {
        if (this.currentPageIndex > 0) {
          this.currentPageIndex--;
          this.updateDisplayContent();
        }
      },
      // 修改 highlightKeywords 方法，增强星号处理
      highlightKeywords(text) {
        if (!text) return "";
        
        // 第一步：清理文本，去除行首行尾的孤立星号
        let cleaned = text.trim()
          // 移除行首的星号
          .replace(/^\*+\s*/gm, '')
          // 移除行尾的星号
          .replace(/\s*\*+$/gm, '')
          // 移除段落之间的孤立星号行
          .replace(/\n\s*\*+\s*\n/g, '\n\n');
          
        // 第二步：处理关键词高亮（*word* 或 **word**）
        return cleaned.replace(/\*{1,2}([^\*\n]+?)\*{1,2}/g, (match, keyword) => {
          const word = keyword.trim();
          return `<span class="keyword-highlight" data-word="${word}">${word}</span>`;
        });
      },
      // 更新当前页面内容

      removeThinkingContent(content) {
        if (!content) return "";
        // 移除所有 <think></think> 标签及其内容
        return content.replace(/<think>[\s\S]*?<\/think>/g, "");
      },


      // 更新显示内容
      updateDisplayContent() {
        // 清除现有动画
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
        
        const page = this.currentPage;
        if (page && page.englishContent) {
          this.displayLines = page.englishContent.split('\n');
        } else {
          this.displayLines = [];
        }
                // 同步翻译和图片
        this.chineseTranslation = page.chineseContent || "";
        this.sceneImage = page.sceneImage || null;
        this.choices = page.choices || [];
        this.isStoryEnding = (page.choices && page.choices.length === 0);
      },

    handleKeydown(e) {
        if (e.code === 'Space' && this.isAnimating) {
          // 直接显示全部文本
          e.preventDefault(); // 阻止空格键触发按钮点击等默认行为

          if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
          }
          this.displayLines = this.storyContent.split('\n');
          this.isAnimating = false;
          
        }
    },

    // 切换翻译显示/隐藏
    toggleTranslation() {
      this.showTranslation = !this.showTranslation;
    },

    // 提取英文和中文内容的方法
    // 提取英文和中文内容的方法
    // 替换现有的 extractBilingualContent 方法
    extractBilingualContent(content) {
      if (!content) return { english: "", chinese: "", choices: "" };
      
      // 先过滤掉思考内容
      const filteredContent = this.removeThinkingContent(content);
      
      // 匹配任何形式的英文标记（如 English:, English Ending:, English Story: 等）
      const englishRegex = /(?:English\s*(?:\w+)?\s*:)([\s\S]*?)(?=Chinese\s*(?:\w+)?\s*:|Choices:|$)/i;
      
      // 匹配任何形式的中文标记（如 Chinese:, Chinese Ending:, Chinese Story: 等）
      const chineseRegex = /(?:Chinese\s*(?:\w+)?\s*:)([\s\S]*?)(?=Choices:|$)/i;
      
      // 匹配选项部分
      const choicesRegex = /(?:Choices:)([\s\S]*?)$/i;
      
      let englishContent = "";
      let chineseContent = "";
      let choicesContent = "";
      
      // 提取英文内容
      const englishMatch = filteredContent.match(englishRegex);
      if (englishMatch && englishMatch[1]) {
        englishContent = englishMatch[1].trim();
      }
      
      // 提取中文内容
      const chineseMatch = filteredContent.match(chineseRegex);
      if (chineseMatch && chineseMatch[1]) {
        chineseContent = chineseMatch[1].trim();
      }
      
      // 提取选项内容
      const choicesMatch = filteredContent.match(choicesRegex);
      if (choicesMatch && choicesMatch[1]) {
        choicesContent = choicesMatch[1].trim();
      }
      
      // 如果没有找到内容，返回整个内容作为英文
      if (!englishContent && !chineseContent) {
        englishContent = filteredContent;
      }
      
      return {
        english: englishContent,
        chinese: chineseContent,
        choices: choicesContent
      };
    },
    
    // 启动互动故事
    startInteractiveStory() {
      this.resetStory();
      this.loading = true;
      
      let userJson = localStorage.getItem("user");
      let user = JSON.parse(userJson);
      
      request
        .post("/api/deepseek/story", null, {
          params: { userID: user.userID }
        })
        .then(res => {
          if (
            res &&
            res.choices &&
            res.choices[0] &&
            res.choices[0].message &&
            res.choices[0].message.content
          ) {
            const content = res.choices[0].message.content;
            
                        // 先过滤思考内容
            const filteredContent = this.removeThinkingContent(content);
            
            // 解析双语内容
            const bilingualContent = this.extractBilingualContent(filteredContent);
            
            // 提取选项
            const choices = [];
            if (bilingualContent.choices) {
              const lines = bilingualContent.choices.split('\n');
              for (const line of lines) {
                const trimmedLine = line.trim();
                if (/^\d+\./.test(trimmedLine)) {
                  const choice = trimmedLine.replace(/^\d+\.\s*/, '');
                  choices.push(choice);
                }
              }
            }
            
            // 创建第一个故事页面
            this.storyPages = [{
              englishContent: bilingualContent.english,
              chineseContent: bilingualContent.chinese,
              sceneImage: res.sceneImage || null,
              choices: choices
            }];
            
            // 保留原有变量设置以兼容其他函数
            this.storyContent = bilingualContent.english;
            this.chineseTranslation = bilingualContent.chinese;
            this.choices = choices; // 直接使用已提取的选项
            this.storyStarted = true;
            this.currentPageIndex = 0;
            this.isStoryEnding = choices.length === 0;
            this.sceneImage = res.sceneImage || null;
            
            // this.extractChoices();
            this.animateStory();
          } else {
            this.displayLines = ["故事生成失败，请重试。"];
          }
        })
        .catch(() => {
          this.displayLines = ["获取故事失败，请重试。"];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 提取故事中的选项
    extractChoices() {
      if (!this.storyContent) return;
      
      // 分离故事内容和选项
      const parts = this.storyContent.split(/choices:/i);
      
      if (parts.length > 1) {
        const storyPart = parts[0].trim();
        const choicesPart = parts[1].trim();
        
        // 更新故事内容（不包含选项部分）
        this.storyContent = storyPart;
        this.choicesText = choicesPart;
        
        // 提取选项
        this.choices = [];
        const lines = choicesPart.split('\n');
        for (const line of lines) {
          const trimmedLine = line.trim();
          if (/^\d+\./.test(trimmedLine)) {
            const choice = trimmedLine.replace(/^\d+\.\s*/, '');
            this.choices.push(choice);
          }
        }
      } else {
        // 如果没有找到选项，可能是结局
        this.isStoryEnding = true;
      }
    },
    
    // 选择故事分支
    // 选择故事分支
    selectChoice(choiceIndex) {
      this.loading = true;
      
      let userJson = localStorage.getItem("user");
      let user = JSON.parse(userJson);
      
      request
        .post("/api/deepseek/story/choice", null, {
          params: { 
            userID: user.userID,
            choiceIndex: choiceIndex
          }
        })
        .then(res => {
          if (
            res &&
            res.choices &&
            res.choices[0] &&
            res.choices[0].message &&
            res.choices[0].message.content
          ) {
            const content = res.choices[0].message.content;
            
            // 先过滤思考内容
            const filteredContent = this.removeThinkingContent(content);
            
            // 解析双语内容
            const bilingualContent = this.extractBilingualContent(filteredContent);
            
            // 提取选项
            const choices = [];
            if (bilingualContent.choices) {
              const lines = bilingualContent.choices.split('\n');
              for (const line of lines) {
                const trimmedLine = line.trim();
                if (/^\d+\./.test(trimmedLine)) {
                  const choice = trimmedLine.replace(/^\d+\.\s*/, '');
                  choices.push(choice);
                }
              }
            }
            
            // 创建新页面并添加到数组
            this.storyPages.push({
              englishContent: bilingualContent.english,
              chineseContent: bilingualContent.chinese,
              sceneImage: res.sceneImage || null,
              choices: choices
            });
            
            // 更新当前页索引指向新页面
            this.currentPageIndex = this.storyPages.length - 1;
            
            // 同时更新兼容变量
            this.storyContent = bilingualContent.english;
            this.chineseTranslation = bilingualContent.chinese;
            this.choices = choices;
            this.isStoryEnding = choices.length === 0;
            this.sceneImage = res.sceneImage || null;
            
            // 更新显示
            this.animateStory();
          } else {
            this.displayLines.push("无法继续故事，请重试。");
          }
        })
        .catch(() => {
          this.displayLines.push("处理选择失败，请重试。");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 动画展示故事
    animateStory() {
      // 清除现有定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }

      if (!this.storyContent) {
        console.error('故事内容为空');
        return;
      }

      // 获取当前显示内容和新增内容
      const currentContent = this.displayLines.join('\n');
      let newContent = this.storyContent;
      
      // 如果有当前内容，只处理新增部分
      if (currentContent && this.storyContent.includes(currentContent)) {
        newContent = this.storyContent.substring(currentContent.length).trim();
        // 如果新内容以换行开头，移除前导换行
        if (newContent.startsWith('\n')) {
          newContent = newContent.replace(/^\n+/, '');
        }
        // 确保新旧内容之间有适当的换行
        if (newContent && this.displayLines.length > 0) {
          // 如果当前最后一行不是空行，添加空行
          if (this.displayLines[this.displayLines.length - 1] !== '') {
            this.displayLines.push('');
          }
        }
      } else {
        // 如果没有当前内容或内容不匹配，重置显示
        this.displayLines = [''];
      }
      
      // 没有新内容需要动画显示时直接返回
      if (!newContent) {
        this.isAnimating = false;
        return;
      }
      
      // 准备动画展示新内容
      const characters = newContent.split('');
      let currentLineIndex = this.displayLines.length - 1;
      let charIndex = 0;
      this.isAnimating = true;

      this.timer = setInterval(() => {
        if (charIndex < characters.length) {
          const char = characters[charIndex];
          if (char === '\n') {
            this.displayLines.push('');
            currentLineIndex++;
          } else {
            this.displayLines[currentLineIndex] += char;
          }
          charIndex++;
        } else {
          clearInterval(this.timer);
          this.timer = null;
          this.isAnimating = false;
        }

        // 自动滚动到底部
        this.$nextTick(() => {
          const dialogueBox = document.querySelector('.dialogue-box');
          if (dialogueBox) {
            dialogueBox.scrollTop = dialogueBox.scrollHeight;
          }
        });
      }, 30);
    },

    // ...existing code...
    playEnglishSpeech() {
      const text = this.currentPage.englishContent;
      if (!text) return;
      // 停止之前的朗读
      window.speechSynthesis.cancel();
      const utter = new window.SpeechSynthesisUtterance(text);
      utter.lang = 'en-US';
      utter.rate = 1.0;
      window.speechSynthesis.speak(utter);
    },

    addKeywordClickListener() {
      document.querySelectorAll('.keyword-highlight').forEach(el => {
        el.onclick = () => {
          const word = el.getAttribute('data-word');
          if (word) this.$router.push(`/word/${encodeURIComponent(word)}`);
        };
      });
    },
          
    // 重置故事状态
    resetStory() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      
      this.storyContent = "";
      this.displayLines = [];
      this.choices = [];
      this.choicesText = "";
      this.storyStarted = false;
      this.isStoryEnding = false;
      this.sceneImage = null; // 重置场景图像
      
      // 重置翻译相关状态
      this.chineseTranslation = "";
      this.showTranslation = false;
    }
  },

  mounted() {

    window.addEventListener('keydown', this.handleKeydown);
    this.$nextTick(this.addKeywordClickListener);
  },
  updated() {
  this.$nextTick(this.addKeywordClickListener);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeydown);
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>
<style>
/* 放在 <style> 不加 scoped 部分 */
.keyword-highlight {
  color: #ff5c7c;
  background: linear-gradient(90deg, #fffbe6 60%, #ffe0f0 100%);
  border-radius: 6px;
  padding: 2px 6px;
  font-weight: bold;
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s, color 0.2s, transform 0.2s;
  box-shadow: 0 1px 6px rgba(255,92,124,0.08);
  position: relative;
}
.keyword-highlight:hover {
  background: #ffe0f0;
  box-shadow: 0 2px 12px #ffb3c6;
  color: #d72660;
  transform: scale(1.12) rotate(-2deg);
  animation: keyword-bounce 0.4s;
}
@keyframes keyword-bounce {
  0% { transform: scale(1) rotate(0deg);}
  30% { transform: scale(1.18) rotate(-2deg);}
  60% { transform: scale(0.95) rotate(1deg);}
  100% { transform: scale(1.12) rotate(-2deg);}
}
</style>
<style scoped>
.story-view {
  max-width: 900px;
  margin: 48px auto;
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(80, 120, 200, 0.13);
  padding: 40px 36px 32px 36px;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  min-height: 480px;
}

.scene-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: -60px;
  position: relative;
  z-index: 1;
}
.scene-image {
  max-width: 700px;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(80, 120, 200, 0.13);
}
.scene-image-placeholder {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -60px;
  position: relative;
  z-index: 1;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  color: #aaa;
  font-size: 1.1rem;
  font-style: italic;
}
.dialogue-box {
  max-width: 700px;
  margin: 0 auto;
  background: #b3aaff;
  border: 4px dashed #6a82fb; /* 虚线边框增加童趣 */
  border-radius: 32px;         /* 更大的圆角 */
  color: #3b3b5c;
  padding: 40px 48px 32px 48px;
  font-family: "Comic Sans MS", "Segoe Script", "PingFang SC", Arial, sans-serif; /* 卡通字体 */
  font-size: 1.22rem;
  line-height: 2.1;
  box-shadow: 0 8px 32px rgba(80, 120, 200, 0.19), 0 0 0 8px #fff8ed inset;
  letter-spacing: 0.5px;
  position: relative;
  /* 卡通小装饰气泡 */
  overflow: visible;
}
.dialogue-box:before {
  content: '';
  display: block;
  position: absolute;
  left: 50px;
  bottom: -28px;
  width: 56px;
  height: 28px;
  background: #ffe066;
  border-radius: 24px 24px 24px 24px;
  box-shadow: 0 4px 16px rgba(80, 120, 200, 0.09);
  border: 3px dashed #b3aaff;
  z-index: 1;
}
.character-name {
  font-family: 'Segoe Script', 'Comic Sans MS', cursive;
  color: #ffe066;
  font-size: 1.2em;
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: 1px;
}
.dialogue-text {
  white-space: pre-wrap;
  margin: 0 0 18px 0;
  font-size: 1.15rem;
  color: #fff;
  background: transparent;
  border: none;
  padding: 0;
}
.choices-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.choice-btn {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid #b3aaff;
  color: #ffe066;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}
.choice-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: #ffe066;
}

.story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.story-header h2 {
  font-size: 2.1rem;
  color: #3b3b5c;
  margin: 0;
  letter-spacing: 2px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.button-container {
  display: flex;
  gap: 12px;
}

.refresh-btn {
  background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 26px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(100, 100, 200, 0.08);
  transition: background 0.3s, transform 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-btn:hover {
  background: linear-gradient(90deg, #fc5c7d 0%, #6a82fb 100%);
  transform: translateY(-2px) scale(1.04);
}

.reset-btn {
  background: #64748b;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background: #475569;
  transform: translateY(-2px);
}

.refresh-btn .icon, .reset-btn .icon {
  font-size: 1.3em;
}


/* 新增加载覆盖层样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}


.loading {
  background: white;
  padding: 20px 40px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  color: #6a82fb;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 15px;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #b3b3e6;
  border-top: 3px solid #6a82fb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


.no-story {
  color: #aaa;
  margin-top: 40px;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 1px;
}

/* 故事选项部分 */
.choices-container {
  margin-top: 30px;
  padding: 20px;
  background: rgba(248, 249, 254, 0.9);
  border-radius: 10px;
  border-left: 4px solid #6a82fb;
  position: relative;
  z-index: 2;
}

.choices-title {
  color: #4b5563;
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 16px;
}

.choices-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choice-btn {
  background: rgba(240, 244, 255, 0.9);
  border: 1px solid #d1defa;
  padding: 12px 18px;
  text-align: left;
  border-radius: 8px;
  font-size: 1rem;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}

.choice-btn:hover {
  background: rgba(224, 231, 255, 0.9);
  border-color: #6a82fb;
  transform: translateX(5px);
}

.story-ending {
  margin-top: 30px;
  text-align: center;
  font-style: italic;
  color: #6a82fb;
  font-weight: 600;
  padding: 10px;
  border-top: 1px dashed #d1defa;
  position: relative;
  z-index: 2;
}

.ending-icon {
  margin-right: 8px;
  font-size: 1.2em;
}

/* 中文翻译相关样式 */
.translation-text {
  white-space: pre-wrap;
  margin: 12px 0 18px 0;
  padding: 12px;
  font-size: 1.05rem;
  color: #adceff;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid #6a82fb;
  border-radius: 4px;
}

.translation-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffe066;
  border: 1px solid #b3aaff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
}

.translation-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.no-image-notice {
  color: #6a82fb;
  font-size: 1.2rem;
  font-style: italic;
}
/* 页面导航样式 */
.page-navigation {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
}

.page-nav-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #ffe066;
  border: 1px solid #b3aaff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 确保对话框有足够的底部空间 */
.dialogue-box {
  padding-bottom: 60px;
}

.speech-btn {
  position: absolute;
  bottom: 16px;
  right: 140px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffe066;
  border: 1px solid #b3aaff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
}
.speech-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.back-btn {
  margin-right: 0;
}
.back-btn:hover {
  color: #fc5c7d;
}
.story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.story-header h2 {
  flex: 1;
  text-align: center;
}


</style>